<template>
  <div>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i>未报到学生管理
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="container-right">
          <div class="handle-box">
            <el-form
                :inline="true"
                :model="form"
                class="demo-form-inline"
                label-width="70px"
            >
              <!--              <el-form-item label-width="20px">-->
              <!--                <el-select-->
              <!--                  v-model="query.collegeId"-->
              <!--                  filterable-->
              <!--                  placeholder="请选择学院"-->
              <!--                  @focus="getAllCollege()"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in options"-->
              <!--                    :key="item.sid"-->
              <!--                    :label="item.collegeName"-->
              <!--                    :value="item.sid"-->
              <!--                  >-->
              <!--                  </el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <el-form-item label="专业">
                <el-select
                    v-model="query.majorId"
                    filterable
                    placeholder="请选择专业"
                    @focus="getMajor()"
                >
                  <el-option
                      v-for="item in optionsMajors"
                      :key="item.sid"
                      :label="item.majorName"
                      :value="item.sid"
                      :disabled="item.adviserId==queryAdviserId.adviserId ? false:true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="班级">
                <el-select
                    v-model="query.className"
                    filterable
                    placeholder="请选择班级"
                    @focus="getClassList()"
                    style="width: 80%"
                >
                  <el-option
                      v-for="item in classList"
                      :key="item.className"
                      :label="item.className"
                      :value="item.className"
                      :disabled="item.adviserId==queryAdviserId.adviserId ? false:true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item>-->
              <!-- <div class="block"> -->
              <!--                <el-date-picker-->
              <!--                    v-model="query.allocateDate"-->
              <!--                    type="date"-->
              <!--                    placeholder="选择一个日期"-->
              <!--                    format="YYYY-MM-DD"-->
              <!--                    value-format="YYYY-MM-DD"-->
              <!--                    :disabled-date="disabledDate"-->
              <!--                    :shortcuts="shortcuts"-->
              <!--                >-->
              <!--                </el-date-picker>-->
              <!-- </div> -->
              <!--              </el-form-item>-->
              <el-form-item label="学生姓名">
                <el-input
                    v-model="query.studentName"
                    placeholder="姓名"
                    class="inline-input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleSearch"
                >搜索
                </el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                    class="btn"
                    type="primary"
                    icon="el-icon-upload"
                    @click="handleExport"
                >导出
                </el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon"
                    @click="handleAdd()"
                >批量通知
                </el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"/>
              <el-table-column
                  :show-overflow-tooltip="true"
                  :prop="item.prop"
                  :label="item.label"
                  v-for="item in props"
                  :key="item.prop"
              >
              </el-table-column>
              <!--                  {label: "性别", prop: "gender"},-->
              <el-table-column>
                <el-table-column
                    label="操作"
                    width="220px"
                    align="center"
                    fixed="right"
                >
                  <template #default="scope">
                    <el-button
                        type="text"
                        icon="el-icon-thumb"
                        class="red"
                        @click="handleSee( scope.row.studentId)"
                    >查看通告
                    </el-button
                    >
                    <!--                                <el-button-->
                    <!--                                    type="text"-->
                    <!--                                    icon="el-icon-edit"-->
                    <!--                                    class="red"-->
                    <!--                                    @click="handleClass( scope.$index,scope.row.majorId,scope.row.sid)"-->
                    <!--                                >微调班级-->
                    <!--                                </el-button-->
                    <!--                                >-->
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
                :currentPage="query.pageNum"
                :page-sizes="[10, 20, 40]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择学生-->
    <div>
      <el-dialog title="信息通告" v-model="dialogVisible" width="50%">
        <el-form :model="bulletin" label-width="100px">
          <el-form-item label="通告标题">
            <el-input v-model="bulletin.title" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="通告优先级">
            <el-radio v-model="bulletin.level" label="3" border> 一级</el-radio>
            <el-radio v-model="bulletin.level" label="2" border>二级</el-radio>
            <el-radio v-model="bulletin.level" label="1" border>三级</el-radio>
          </el-form-item>
          <!--          <el-form-item label="分类" prop="cid">-->
          <!--            <el-select v-model="bulletin" placeholder="请选择">-->
          <!--              <el-option-->
          <!--                  v-for="item in cateList"-->
          <!--                  :key="item.sid"-->
          <!--                  :label="item.name"-->
          <!--                  :value="item.sid"-->
          <!--                  :disabled="item.sid==4 ? true:false"-->
          <!--              >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="作者">-->
          <!--            <el-input v-model="bulletin.author" style="width: 80%"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="通告标题">
            <div id="div1"></div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {ref, reactive, toRefs, nextTick} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import request from "../../utils/request";
import E from "wangeditor";

export default {
  name: "FailCheck",

  methods: {
    clickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
  },
  setup() {
    const router = useRouter();
    const props = [
      {label: "学号", prop: "studentId"},
      {label: "学生姓名", prop: "studentName"},
      {label: "身份证号", prop: "idCardNo"},
      {label: "籍贯（省）", prop: "domicilePlaceProvince"},
      {label: "性别", prop: "gender"},
      {label: "民族", prop: "nation"},
      {label: "年级", prop: "grade"},
      {label: "学院名称", prop: "collegeName"},
      {label: "专业名", prop: "majorName"},
      {label: "班级名称", prop: "className"},
      // { label: "加入班级时间", prop: "allocateDate" },
      // {label: "班级序号", prop: "classCode"},
    ];
    const treeData = reactive({
      data: [],
    });
    const queryAdviserId = reactive({
      adviserId: localStorage.getItem("sid")
    })
    request.get("/college/ThreeTree",
        {
          params: queryAdviserId,
        }).then((res) => {
      treeData.data = res.data;
    });
    const query = reactive({
      // collegeId: "",
      majorId: "",
      className: "",
      studentName: "",
      // allocateDate: "",
      adviserId: localStorage.getItem("sid"),
      pageNum: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const getData = () => {
      tableData.value = [];
      query.adviserId = localStorage.getItem("sid")
      request
          .get("/student/fileCheckIn", {
            params: query,
          })
          .then((res) => {
            if (res.code != 0) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
              pageTotal.value = res.data.total;
              query.collegeId = "";
              query.majorId = "";
              query.studentName = "";
            }
          });
    };
    getData();
    //导出
    const handleExport = () => {
      query.adviserId = localStorage.getItem("sid")
      window.location.href =
          "http://localhost:9998/student/fileCheckInExport?majorId=" +
          query.majorId +
          "&className=" +
          query.className +
          "&adviserId=" +
          query.adviserId + "";
    };
    // 查询操作
    const handleSearch = () => {
      // query.className = query.className;
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };
    // 单个数据移除
    const handleDelete = (index, sid) => {
      // tableSelection.idList = [];
      // tableSelection.idList[0] = sid;
      handleAlloc();
    };
    // //学院下拉框
    // const options = ref([]);
    // const getAllCollege = () => {
    //   console.log(query.collegeId);
    //   request.get("/college/getAllCollege").then((res) => {
    //     options.value = res.data;
    //     getMajor;
    //   });
    // };
    //专业下拉框
    const optionsMajors = ref([]);
    const getMajor = () => {
      request
          .get("/major/queryList", {
            params: {collegeId: query.collegeId, type: 1},
          })
          .then((res) => {
            optionsMajors.value = res.data;
          });
    };
    //班级下拉框
    const classList = ref([]);
    const getClassList = () => {
      request
          .get("/class/byMajorIdOrCollegeId", {
            params: {majorId: query.majorId},
          })
          .then((res) => {
            classList.value = res.data;
          });
    };
    // 新增操作
    let editor
    const bulletin = ref({
      content: "",
      title: "",
      level: "",
    })
    const handleAdd = () => {
      dialogVisible.value = true
      bulletin.value = {}
      nextTick(() => {
        // 关联弹窗里面的div，new一个 editor对象
        if (!editor) {
          editor = new E('#div1')
          // 配置 server 接口地址
          editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
          editor.config.uploadFileName = "file"  // 设置上传参数名称
          editor.create()
        }
        editor.txt.html("")

      })
    }

    const handleSee = (studentId) => {
      router.push({path: "/admin/viewReserveContent", query: {studentId: studentId}});
    };
    //多选
    const tableSelection = reactive({
      studentIds: [],
      bulletin: {},
    });
    //选择列表框1
    const handleSelectionChange = (val) => {
      tableSelection.studentIds = [];
      for (var i in val) {
        tableSelection.studentIds.push(val[i].studentId);
      }
    };
    //树状触发事件
    // const handleNodeClick = (data) => {
    //   if (!data.children) {
    //     query.className = data.label;
    //     getData();
    //   }
    // };
    //移除学生
    const handleAlloc = () => {
      if (tableSelection.idList.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定移除吗？", "提示", {
        type: "warning",
      }).then(() => {
        request.post("/student/updateClassId", tableSelection).then((res) => {
          if (res.code === null) {
            ElMessage.success("移除成功");
            getData();
          } else {
            tableSelection.idList = [];
            ElMessage.error("移除失败");
          }
        });
      });
    };
    const dialogVisible = ref(false);
    const save = () => {
      bulletin.value.content = editor.txt.html()
      console.log(bulletin.value)
      tableSelection.bulletin = bulletin
      if (tableSelection.studentIds.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      if (bulletin.value.sid) {  // 更新
        request.put("/bulletin", tableSelection).then(res => {
          console.log(res)
          if (res.code === null) {
            ElMessage.success("更新成功")
          } else {
            ElMessage.error(res.msg)
          }
          getData()// 刷新表格的数据
          dialogVisible.value = false  // 关闭弹窗
        })
      } else {  // 新增
        request.post("/bulletin/saveBatchBulletin", tableSelection).then(res => {
          if (res.code === null) {
            ElMessage.success("发送成功")
          } else {
            ElMessage.error(res.msg)
          }
          getData()// 刷新表格的数据
          dialogVisible.value = false  // 关闭弹窗
        })
      }
    }

    // const handleClass = (index, majorId, sid) => {
    //   // tableSelection.idList[0] = sid;
    //   // console.log(sid)
    //   dialogVisible.value = true;
    //   query.majorId = majorId;
    //   getClassList();
    //   // request.get("/class/byMajorIdOrCollegeId?majorId=" + val).then((res) => {
    //   //   classList.value = res.data;
    //   // });
    // };
    // const checkClass = (row) => {
    //   tableSelection.classId = row.sid;
    //   if (tableSelection.idList.length === 0) {
    //     ElMessage.info("请选择学生");
    //     return;
    //   }
    //   ElMessageBox.confirm("确定微调班级吗？", "提示", {
    //     type: "warning",
    //   }).then(() => {
    //     request
    //         .post("/student/updateStudentClass", tableSelection)
    //         .then((res) => {
    //           if (res.code === "0") {
    //             ElMessage.success("调班成功");
    //             dialogVisible.value = false;
    //             getData();
    //           } else {
    //             tableSelection.idList = [];
    //             ElMessage.error(res.msg);
    //           }
    //         });
    //   });
    //   console.log(row);
    // };

    return {
      props,
      query,
      bulletin,
      // options,
      optionsMajors,
      treeData,
      tableData,
      pageTotal,
      tableSelection,
      classList,
      dialogVisible,
      queryAdviserId, editor,
      // checkClass,
      // handleClass,
      getClassList,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      handleSee,
      handleSelectionChange,
      // handleNodeClick,
      handleAlloc,
      save,
      // getAllCollege,
      getMajor,
      handleExport,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.container-left {
  width: 20%;
  padding-right: 20px;
}

.container-right {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.btn {
  display: flex;
  text-align: left;
  padding-bottom: 10px;
}

.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
